@if (content) {
  <mat-card
    appearance="outlined"
    class="card overflow-hidden {{ content.header?.meta ? 'has-header' : '' }}"
    [ngClass]="content.classes"
  >
    @if (content.header?.meta) {
      <mat-card-content>
        <app-card-meta [attr.data-path]="'header.meta'" [content]="content.header?.meta" />
      </mat-card-content>
    }
    @if (content.header) {
      <mat-card-header class="m-bottom-xs">
        @if (content.header.avatar) {
          <div mat-card-avatar>
            <app-img
              [attr.data-path]="'header.avatar'"
              [content]="content.header.avatar || { src: '' }"
            />
          </div>
        }
        @if (content.header.title) {
          <mat-card-title
            contentedit="header.title"
            contentedit="title"
            [innerHTML]="content.header.title || '' | safeHtml"
          />
        }
        @if (content.header.subTitle) {
          <mat-card-subtitle
            contentedit="header.subTitle"
            [innerHTML]="content.header.subTitle || '' | safeHtml"
          />
        }
      </mat-card-header>
    }
    <div class="card-header relative">
      @if (content.carousel) {
        @if (content.carousel?.elements.length > 1) {
          <app-dynamic-component
            [attr.data-path]="'carousel'"
            [inputs]="content.carousel"
          ></app-dynamic-component>
        } @else {
          <app-feature-box
            [attr.data-path]="'carousel.elements.0'"
            [content]="content.carousel.elements[0]"
          />
        }
        <ng-template #feature>
          <app-feature-box
            [attr.data-path]="'carousel.elements.0'"
            [content]="content.carousel.elements[0]"
          />
        </ng-template>
      }
      @if (!content.carousel && content.feature) {
        <app-feature-box [attr.data-path]="'feature'" [content]="content.feature" />
      }
    </div>
    <mat-card-content>
      <div class="flex flex-row py-3">
        @if (content.avatar) {
          <div mat-card-avatar class="m-right-xs">
            <app-img [attr.data-path]="'img'" [content]="content.avatar" />
          </div>
        }
        <div class="flex flex-wrap basis-full">
          @if (content.title) {
            <mat-card-title contentedit="title" class="basis-full">
              <div [innerHTML]="content.title | safeHtml"></div>
            </mat-card-title>
          } @else {
            @if (content.link) {
              <mat-card-title class="basis-full">
                <app-link [attr.data-path]="'link'" [content]="content.link" />
              </mat-card-title>
            }
          }
          <ng-template #link>
            @if (content.link) {
              <mat-card-title class="basis-full">
                <app-link [attr.data-path]="'link'" [content]="content.link" />
              </mat-card-title>
            }
          </ng-template>
          @if (content.subTitle) {
            <mat-card-subtitle contentedit="subTitle" class="basis-full">
              <div [innerHTML]="content.subTitle | safeHtml"></div>
            </mat-card-subtitle>
          }
        </div>
      </div>
      @if (content.body) {
        <div contentedit="body" class="card-body pb-4" [innerHTML]="content.body | safeHtml"></div>
      }
    </mat-card-content>
    @if (content.actions) {
      <mat-card-actions [attr.data-path]="'actions'">
        @for (action of content.actions; track action) {
          <button mat-button>
            {{ action.label }}
          </button>
        }
      </mat-card-actions>
    }
    <mat-card-footer>
      @if (content.footer) {
        <div class="footer">
          <app-card-meta [attr.data-path]="'footer.meta'" [content]="content.footer.meta" />
        </div>
      }
      @if (content.progressBar) {
        <app-progress-bar [content]="content.progressBar" />
      }
    </mat-card-footer>
  </mat-card>
}
